<template>
  <el-card class="box-card">
    <!-- 面包屑（不需要的话可以删掉） -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-row>
      <el-col>
        <el-row class="searchRow">
          <!-- 搜索框 -->
          <el-input placeholder="请输入内容"
                    v-model="query"
                    clearable
                    @clear="loadUserList()"
                    class="inputSearch">
            <el-button slot="append"
                       @click="searchUser()"
                       icon="el-icon-search"></el-button>
          </el-input>
          <!-- 添加按钮 -->
          <el-button type="success"
                     @click="showAddUserDia"
                     plain>添加用户</el-button>
        </el-row>

      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table :data="userlist"
              style="width: 100%">
      <el-table-column type="index"
                       label="#"
                       width="60">
      </el-table-column>
      <el-table-column prop="username"
                       label="姓名"
                       width="100">
         <template slot-scope="scope">
          {{ scope.row.username }}
        </template>  
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>  
      </el-table-column>
      <el-table-column prop="mobile"
                       label="电话">
         <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>              
      </el-table-column>
      <el-table-column label="创建日期">
        <!-- 如果单元格内显示的内容不是字符串(文本),需要给被显示的内容外层包裹一个template-->
        <!-- template内部要用数据 设置slot-scopre属性，该属性的值是用数据的create_time的数据源userlist -->
        <!-- slot-scope的值userlist其实就是el-table绑定的数据userlist userlist.row是数组中的每个对象 -->
        <template slot-scope="scope">
          {{ scope.row.create_time | fmtdate }}
        </template>
      </el-table-column>
      <el-table-column label="用户状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
          </el-switch>

        </template>
      </el-table-column>
      <el-table-column prop="address"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     plain
                     size="mini"
                     icon="el-icon-edit"
                     @click="edit(scope.row)"
                     circle></el-button>
          <el-button type="success"
                     plain
                     size="mini"
                     icon="el-icon-check"
                     circle></el-button>
          <el-button type="danger"
                     plain
                     size="mini"
                     icon="el-icon-delete"
                     @click="del(scope.row)"
                     circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination class="pagination"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pagenum"
                   :page-sizes="[2, 4, 6, 8]"
                   :page-size="2"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog title="添加用户"
               :visible.sync="dialogFormVisibleAdd"
               >
      <el-form :model="form">
        <el-form-item label="用户名"
                      label-width="100px">
          <el-input v-model="form.username"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      label-width="100px">
          <el-input v-model="form.email"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话"
                      label-width="100px">
          <el-input v-model="form.mobile"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary"
                   @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="修改用户"
               :visible.sync="dialogFormVisibleEdit"
               >
      <el-form :model="form">
        <el-form-item label="用户名"
                      label-width="100px">
          <el-input v-model="form.username"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      label-width="100px">
          <el-input v-model="form.email"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话"
                      label-width="100px">
          <el-input v-model="form.mobile"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary"
                   @click="editUser()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>
<script>
import { getUserslistdata, getAddUsersdata } from '../../network/users'
import axios from 'axios'
export default {
  name: 'users',
  data () {
    return {
      query: '',
      userlist: [],
      total: 0,
      pagenum: 1,
      pagesize: 2,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit:false,
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }

    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    //列表
    async getUserList () {
      let query = this.query
      let pagenum = this.pagenum
      let pagesize = this.pagesize
      const res = await getUserslistdata(query, pagenum, pagesize)
      console.log(res)
      this.status = res.meta.status
      this.msg = res.meta.msg
      this.users = res.data.users
      this.total = res.data.total
      if (this.status === 200) {
        this.userlist = this.users
        this.total = this.total
        this.$message.success(this.msg)
      } else {
        this.$message.warning(this.msg)
      }
    },
    //分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val
      // this.pagenum = 1 
      this.getUserList()

      console.log(this.userlist.slice(0, val))
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val
      this.getUserList()
    },
    //搜索
    searchUser () {
      this.getUserList()
      console.log('aaaa')
    },
    //清空搜索框重新获取数据
    loadUserList () {
      this.getUserList()
    },
    //添加用户
    showAddUserDia () {
      this.dialogFormVisibleAdd = true
      this.form = {}
    },
    //添加用户-发送请求
    async addUser () {
      this.dialogFormVisibleAdd = false
      const res = await getAddUsersdata(this.form)
      console.log(res)
      this.status = res.meta.status
      this.msg = res.meta.msg
      if (this.status === 201) {
        this.$message.success(this.msg)
        this.getUserList()
        this.form = {}
      } else {
        this.$message.warning(this.msg)
      }
    },
    //编辑
    edit(row){
         this.dialogFormVisibleEdit = true
         this.$nextTick(() =>{
           this.form = Object.assign({},row)
         })
    },
    editUser(){  //这里调接口就行了

    },
    //删除（加上接口就行了）
    del(){
       this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    }
  }
}
</script>
<style scoped>
.box-card {
  height: 100%;
}
.inputSearch {
  width: 300px;
}
.searchRow {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
}
</style>